CodeSandboxでインストール済みのDependencyに対してModuleNotFoundErrorが発生する場合の対処
こんにちは、CX事業本部 IoT事業部の若槻です。
CodeSandboxは、Webアプリの作成と共有を迅速に行うことができるオンラインコードエディターおよびプロトタイピングツールです。
今回は、CodeSandboxでインストール済みのDependencyに対して「ModuleNotFoundError」が発生した際の対処方法についてです。
先に結論
結論として、下記の3つのいずれかの対処方法の実施により解決しました。
- Dependencyを再インストールする
- Dependencyのインストールバージョンを変更する（変更後に必要に応じて戻す）
- ブラウザのページを更新する
対処その1
事象
https://codesandbox.io/s/20210807-540-2-published-i2nyyのサンドボックスで発生しました。
@material-ui/coreをインストールしてimport Grid from "@material-ui/core/Grid";を記述後しばらくは問題なかったのに、作業中に突然エラーとなりました。
ModuleNotFoundError Could not find module in path: '@material-ui/core/Grid' relative to '/src/App.tsx'
@material-ui/coreはインストール済みにも関わらず、@material-ui/core/Gridに対してModuleNotFoundErrorとなっています。
対処方法
該当のDependency（@material-ui/core）を再インストールすることにより解消しました。
[Explorerタブ > Dependencies]で該当のDependencyをRemoveします。
検索欄に同じDependency名を入力して決定します。
するとDependencyが再度インストールされます。この対処によりModuleNotFoundErrorが解消しました。
対処その2
事象
https://codesandbox.io/s/20210731-530-1-published-g1hi4のサンドボックスで発生しました。
@material-ui/coreをインストールして、次はimport { makeStyles } from "@material-ui/core/styles";を記述後しばらくは問題なかったのに、作業中に突然エラーとなりました。
ModuleNotFoundError Could not find module in path: '@material-ui/core/styles' relative to '/src/components/atoms/ComboBox.tsx'
@material-ui/coreはインストール済みにも関わらず、@material-ui/core/stylesに対してModuleNotFoundErrorとなっています。
対処方法
該当のDependency（@material-ui/core）のバージョンを変更することにより解消しました。
[Explorerタブ > Dependencies]で該当のDependencyにマウスオーバーし、バージョン名（4.12.3）をクリックします。
するとそのDependencyで利用可能なバージョン一覧がドロップダウンリストで開くので、現在とは異なる任意のバージョンを選択します。（なるべく近いバージョンが良いと思います）
Dependencyのバージョンが変更できました。するとこの対処によりModuleNotFoundErrorが解消しました。
その後バージョンを元の4.12.3に戻しても事象は再現しませんでした。
対処その3
事象
対処その2と同じ環境で同じ事象が発生しました。
対処方法
この時は、サンドボックスのページをブラウザで更新すると解消しました。
Issueにも同様のケースが上がっている
CodeSandboxのGitHubに同様のIssueが上がっていました。
このIssueでは@material-ui/coreでないDependency（analytics）で事象が発生しており、勝手に解消したという内容です。
まとめ
- 同じ環境下でも発生する場合としない場合がある
- 再インストールやバージョン変更などの刺激を与えると解消する場合がある
- 特定のDependencyでのみ発生するのかは不明
参考
以上
